<template>
<!--时时彩整合盘下注组件-->
<div>
    <!--下注列表-->
    <div class="bet">
        
        <Row>
            <Col span="24" class="bet-list-tit">第一球</Col>
        </Row>
        <Row class="bet-list-con">
            <!--第一球-->
            <div class="td s_col_20">
                <Col class="rb-line" span="5">大</Col>
                <Col class="rb-line" span="6">1.840</Col>
                <Col class="rb-line" span="13">
                    <input type="number" number="true" class="ivu-input ivu-input-small" />
                </Col>
            </div>
        </Row>   
        <Row>
            <Col span="24" class="bet-list-tit">总和</Col>
        </Row>
        <Row class="bet-list-con">
            <!--梭哈-->
            <div class="td s_col_20">
                <Col class="rb-line" span="5">总和大</Col>
                <Col class="rb-line" span="6">1.840</Col>
                <Col class="rb-line" span="13">
                    <input type="number" number="true" class="ivu-input ivu-input-small" />
                </Col>
            </div>
        </Row>  
        <Row>
            <Col span="24" class="bet-list-tit">龙虎</Col>
        </Row>
        <Row class="bet-list-con">
            <!--梭哈-->
            <div class="td s_col_20">
                <Col class="rb-line" span="5">龙</Col>
                <Col class="rb-line" span="6">1.840</Col>
                <Col class="rb-line" span="13">
                    <input type="number" number="true" class="ivu-input ivu-input-small" />
                </Col>
            </div>
        </Row>   
    </div>
    <!--下注按钮-->
    <div class="addOrderBox clear">
        <Button type="warning" @click="addBet">添加投注</Button>
        <Modal
            v-model="modBet"
            title="Common Modal dialog box title"
            >
            <p>是否确认购买</p>
            <p>共{{total}}元</p>
        </Modal>
    </div>
</div>
    
</template>

<script>
import {Button,Row,Col,Input,Modal} from 'iView'
export default {
    name:"lmpTable",
    data(){
        return{
            modBet:false,//模态框下注确定
            total:"53"//下注金额（需计算）
        }
    },
    components:{
        Button,Row,Col,Input,Modal
    },
    methods:{
        //添加下注按钮
        addBet:function(){
            this.modBet = true;
        }
    }
}
</script>
<style scoped>
.bet{
    border-left: 1px solid #F0AD4E;
}
.td {
    display: block;
    height: 35px;
    line-height: 35px;
    float: left;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.bet-list-tit{
    background-color: #FF9726;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
}
.s_col_20 {
    width: 20%;
}
.bet .rb-line {
    border-right: 1px solid #F0AD4E;
    border-bottom: 1px solid #F0AD4E;
    text-align: center;
}
/*选项*/
.s_col_20 .td .red i {
    display:inline-block;
    background-color: #F13031;
    border-radius: 50%;
    width: 25px !important;
    height: 25px !important;
    line-height: 25px;
    text-align: center;
    color: #FFF;
    font-style: normal;
}
/*添加下注按钮*/
.addOrderBox{
    height: 100px;
}
.addOrderBox button {
    float: right;
    margin: 30px 0;
}
</style>

